<!--
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2024-06-24 01:09:43
 * @LastEditTime: 2024-06-28 22:13:59
 * @Description:视频上传
-->
<template>
  <div class="avatar-uploader-box">
    <div
      v-if="videoPath != '' && !videoFlag"
      class="w-120 h-120 relative"
    >
      <video
        :src="videoPath"
        class="avatar video-avatar model-video fit"
        controls="controls"
      >
        您的浏览器不支持视频播放
      </video>
      <img
        :src="require('@/assets/images/model/video.png')"
        class="absolute w-33 h-33 cursor-pointer right-43 top-31"
        @click="playVideo"
      />
      <div
        class="absolute right-0 bottom-0 full-w h-34 bg-#00000080 center cursor-pointer text-#fff text-14"
        @click.stop="deleteVideo"
      >
        删除
      </div>
    </div>
    <el-upload
      v-else
      class="avatar-uploader"
      :class="{ 'cursor-not-allow': videoFlag }"
      :action="uploadUrl"
      drag
      :disabled="videoFlag"
      :show-file-list="false"
      accept=".mp4,.ogg,.flv,.avi,.wmv,.rmvb"
      :auto-upload="false"
      :on-change="beforeAvatarUpload"
    >
      <i
        v-if="videoPath === '' && !videoFlag"
        class="el-icon-plus avatar-uploader-icon plus-icon"
      ></i>
      <div
        v-if="!videoFlag"
        class="up-text"
      >
        {{ upText }}
      </div>
      <div
        v-if="videoFlag"
        class="up-text"
      >
        {{ loading ? '视频生成中...' : '请点击提交按钮' }}
      </div>
    </el-upload>
    <el-dialog
      title="视频预览"
      :visible.sync="playState"
      custom-class="video-dialog"
      destroy-on-close
    >
      <video
        ref="VideoRef"
        :src="videoPath"
        class="pic-item full-w"
        controls
      ></video>
    </el-dialog>
  </div>
</template>

<script>
// import { createBanner } from '@/api/banner'
export default {
  props: {
    url: {
      type: String,
      default: ''
    },
    upText: {
      type: String,
      default: ''
    },
    videoFlag: Boolean,
    loading: Boolean,
    isBack: Boolean
  },
  data() {
    return {
      // 图片上传
      uploadUrl: '',
      process: process.env.VUE_APP_BASE_API,
      videoPath: '', // 视频地址
      playState: false
    }
  },
  watch: {
    url: {
      handler(nv) {
        if (nv) {
          this.videoPath = process.env.VUE_APP_FILE_text_API + nv
        } else {
          this.videoPath = ''
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    beforeAvatarUpload(event) {
      // 获取上传视频的本地localUrl
      var localUrl = null
      if (window.createObjectURL !== undefined) {
        // basic
        localUrl = window.createObjectURL(event.raw)
      } else if (window.URL !== undefined) {
        // mozilla(firefox)
        localUrl = window.URL.createObjectURL(event.raw)
      } else if (window.webkitURL !== undefined) {
        // webkit or chrome
        localUrl = window.webkitURL.createObjectURL(event.raw)
      }
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
      this.videoPath = localUrl
      this.$emit('getFile', event)
    },
    deleteVideo() {
      if (this.isBack) {
        this.$emit('remove')
      }
      this.videoPath = ''
      this.$emit('getFile', '')
    },
    playVideo() {
      this.playState = true
      this.$nextTick(() => {
        this.$refs.VideoRef.play()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader-box {
  ::v-deep {
    .avatar-uploader .el-upload {
      width: 120px;
      height: 120px;
      line-height: 120px;
      border: 1px dashed #dcdcdc;
      border-radius: 6px;

      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #04d1b8;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      text-align: center;
    }
    .avatar {
      width: 120px;
      height: 120px;
      display: block;
    }

    .iconfont {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      text-align: center;
    }

    .el-upload-dragger {
      width: 100%;
      height: 100%;
      border: 0;
      background-color: #f4f5f9;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
.plus-icon {
  font-size: 28px;
  font-weight: 600;
  color: #1c1f23 !important;
  text-align: center;
}

.up-show {
  color: #1c1f23;
}

.up-text {
  margin-top: 10px;
  font-weight: 400;
  font-size: 10px;
  color: #6a6b6c;
  line-height: 12px;
}
.sub-up-text {
  font-weight: 400;
  font-size: 10px;
  color: #6a6b6c;
  line-height: 12px;
}
.model-video {
  object-fit: cover;
}
.cursor-not-allow {
  ::v-deep .el-upload-dragger {
    cursor: not-allowed;
  }
}
.pic-item {
  aspect-ratio: 16 / 9;
}
</style>
<style>
.video-dialog {
  .el-dialog__body {
    padding-top: 0px;
  }
}
</style>
